import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:lcapp/api/interface/user_api.dart';
import 'package:lcapp/api/request/response_data.dart';
import 'package:lcapp/basic/user_info.dart';
import 'package:lcapp/config/const_config.dart';
import 'package:lcapp/model/toast/toast.dart';
import 'package:lcapp/widget/asr_app_bar.dart';

class MinChangeJiinbiPage extends StatefulWidget {
  const MinChangeJiinbiPage({Key? key}) : super(key: key);

  @override
  _MinChangeJiinbiPageState createState() => _MinChangeJiinbiPageState();
}

class _MinChangeJiinbiPageState extends State<MinChangeJiinbiPage> {

  int selIndex = 0;
  List<Map<String,dynamic>> golds = [
    {
      'money':'1元',
      'gold':10000,
    },
    {
      'money':'5元',
      'gold':50000
    },
    {
      'money':'15元',
      'gold':150000
    },
    {
      'money':'20元',
      'gold':200000
    },
    {
      'money':'25元',
      'gold':250000
    }
  ];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    refreshUserInfo(refreshBlock: (){
      setState(() {});
    });
  }

  getMoney(int gold)async{
    showLoading();
    ResponseData res = await UserAPI.changeGold(gold);
    hideLoading();
    if(res.code==200){
      showToast('兑换成功');
      Navigator.of(context).pop();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AsrAppBar(
        backgroundColor: defaultBarColor,
        barColor: Colors.white,
        titleText: '金币兑换',
        elevation: 0.3,
      ),
      body: Container(
        child: SingleChildScrollView(
          child: Column(
            children: [
              Container(
                padding: EdgeInsets.symmetric(vertical: 50.w),
                decoration: BoxDecoration(
                  color: defaultBarColor,
                ),
                child: Column(
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(Icons.monetization_on_sharp,color: Color(0xffFF991D),size: 30.w,),
                        SizedBox(width: 8.w,),
                        Text('${userInfo.gold}',style: TextStyle(
                            color: Colors.white,
                            fontSize: 60.sp,
                            fontWeight: FontWeight.w600
                        ),)
                      ],
                    ),
                    SizedBox(height: 20.w,),
                    Text('金币收益',style: TextStyle(
                      color: Colors.white,
                      fontSize: 28.sp,
                    ),)
                  ],
                ),
              ),
              Container(
                margin: EdgeInsets.symmetric(vertical: 40.w),
                padding: EdgeInsets.symmetric(horizontal: 30.w),
                child: Row(
                  children: [
                    Container(width: 5,height: 50.w,color: Color(0xffFF7916),),
                    SizedBox(width: 20.w,),
                    Text('提现金额',style: TextStyle(
                        color: Colors.black,
                        fontWeight: FontWeight.w600,
                        fontSize: 40.sp
                    ),),
                  ],
                ),
              ),
              Container(
                padding: EdgeInsets.symmetric(horizontal: 30.w),
                child: GridView.builder(
                   physics: NeverScrollableScrollPhysics(),
                    padding: EdgeInsets.zero,
                    gridDelegate:
                    SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 2,
                        mainAxisSpacing: 21.w,
                        crossAxisSpacing: 21.w,
                        childAspectRatio: 2.5
                    ),
                    shrinkWrap: true,
                    itemCount: golds.length,
                    itemBuilder: (BuildContext context, int i) {
                     Map<String,dynamic> item = golds[i];
                      return GestureDetector(
                        onTap: (){
                          setState(() {
                            selIndex = i;
                          });
                        },
                        child: Container(
                          child: Stack(
                            children: [
                              Image.asset(selIndex==i?'assets/min/min_hjb.png':'assets/min/min_hjb_un.png',fit: BoxFit.fill,),
                              Center(
                                child: Column(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  children: [
                                    Text(item['money'],style: TextStyle(
                                        color:selIndex==i?Color(0xffE8850B): Color(0xff3D3D3D),
                                        fontWeight: FontWeight.w600,
                                        fontSize: 40.sp
                                    ),),
                                    SizedBox(height: 10.w,),
                                    Text('${item['gold']}金币',style: TextStyle(
                                        color:selIndex==i?Color(0xffE8850B) :Color(0xff3D3D3D),
                                        fontSize: 32.sp
                                    ),),
                                  ],
                                ),
                              )
                            ],
                          ),
                        ),
                      );
                    }),
              ),
              GestureDetector(
                onTap: (){
                  if(int.parse(userInfo.gold??'0')<golds[selIndex]['gold']){
                    showToast('当前剩余金币小于${golds[selIndex]['gold']}无法兑换');
                    return;
                  }
                  getMoney(golds[selIndex]['gold']);
                },
                child: Container(
                  margin: EdgeInsets.symmetric(vertical: 80.w),
                  padding: EdgeInsets.symmetric(horizontal: 30.w),
                  child: Container(
                    height: 80.w,
                    width: 1.sw-60.w,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        color: Color(0xffFA6E28),
                        borderRadius: BorderRadius.circular(80.w)
                    ),
                    child: Text('确定兑换',style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.w600,
                        fontSize: 40.sp
                    ),),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
